<template>
  <!-- 商家认证 -->
  <div>
    <div class="form">
      <div class="list">
        <div class="li">
          <div class="left"><span>*</span>门店名称</div>
          <div class="right">
            <input v-model="shopName" placeholder="请填写门店名称" :disabled="selectShop" />
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>门店类型</div>
          <div class="right">
            <el-radio-group v-model="multipleShop" :disabled="status != 2">
              <el-radio label="1">4S店</el-radio>
              <el-radio label="2">汽贸店</el-radio>
              <el-radio label="3">美容装饰</el-radio>
              <el-radio label="4">维修服务</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>办公区域</div>
          <div class="right">
            <el-select id="el-select" v-model="xuan" placeholder="请选择办公区域" :disabled="selectShop">
              <el-option :label="item" :value="item" v-for="(item, index) in addressList" :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>办公地址</div>
          <div class="right">
            <el-input id="input__inner" :disabled="selectShop" v-model="shopAddress" v-if="shopAddress">
              <el-button slot="append" icon="el-icon-location" @click="addressopen"></el-button>
            </el-input>
            <el-input id="input__inner" v-model="shopAddress" disabled v-else placeholder="请选择定位获取地址">
              <el-button slot="append" icon="el-icon-location" @click="addressopen"></el-button>
            </el-input>
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>门店联系电话</div>
          <div class="right">
            <input v-model="shopPhone" :disabled="selectShop" type="number"
              oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请填写门店联系电话" />
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>法人姓名</div>
          <div class="right">
            <input v-model="contacts" :disabled="selectShop" placeholder="请填写联系人姓名" />
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>联系人手机号</div>
          <div class="right">
            <input v-model="contactsPhone" type="number" oninput="if(value.length>11)value=value.slice(0,11)"
              placeholder="请填写联系人手机号" :disabled="selectShop" />
          </div>
        </div>
        <div class="li tuLi">
          <div class="left"><span>*</span>门店介绍</div>
          <div class="tu">
            <!-- <div class="zi">{{ shopIntroduce.length }}/999</div> -->
            <el-input class="textarea" type="textarea" v-model="shopIntroduce" maxlength="500" show-word-limit autosize
              :disabled="selectShop"> </el-input>
          </div>
        </div>
        <div class="li tuLi">
          <div class="left"><span>*</span>门店封面图片</div>
          <div class="tu">
            <el-upload :action="$upLoad" :list-type="portraitImg == '' ? 'picture-card' : ''"
              :on-success="portraitSuccess" :on-remove="portraitRemove" :limit="1" ref="upload6" :on-change="uploadFile"
              :auto-upload="false" :disabled="selectShop">
              <i class="el-icon-plus" v-if="portraitImg == ''"></i>
              <img :src="portraitImg" style="
                  width: 150px;
                  height: 150px;
                  object-fit: contain;
                  cursor: pointer;
                  background-color: #fff;
                " v-if="portraitImg !== ''" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
            <p class="shuoming">
              上传要求清晰、健康、代表品牌形象
              请勿使用二维码，最大5m，200*200像素
            </p>
          </div>
        </div>
        <div class="li tuLi">
          <div class="left"><span>*</span>营业执照</div>
          <div class="tu">
            <el-upload :action="$upLoad" :list-type="yyzzImg == '' ? 'picture-card' : ''" :on-success="yyzzSuccess"
              :on-remove="yyzzRemove" :limit="1" ref="upload1" :on-change="uploadFile1" :auto-upload="false"
              :disabled="selectShop">
              <i class="el-icon-plus" v-if="yyzzImg == ''"></i>
              <img :src="yyzzImg" style="
                  width: 150px;
                  height: 150px;
                  object-fit: contain;
                  cursor: pointer;
                  background-color: #fff;
                " v-if="yyzzImg !== ''" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
            <p class="shuoming">上传要求信息清晰、最大2m</p>
          </div>
        </div>
        <div class="li tuLi">
          <div class="left" style="width: 230px; margin-bottom: 24px">
            <span v-if="danxuan != 2">*</span>法人身份证（信息页）
          </div>
          <div class="tu1">
            <el-upload :action="$upLoad" :list-type="sfzUpImg == '' ? 'picture-card' : ''" :on-remove="sfzUpRemove"
              :on-success="sfzUpSuccess" :limit="1" ref="upload2" :on-change="uploadFile2" :auto-upload="false"
              :disabled="selectShop">
              <img class="sfz" src="../assets/sfz_f.png" v-show="sfzup" />
              <img class="sfz" :src="sfzUpImg" style="
                  object-fit: contain;
                  cursor: pointer;
                  background-color: #fff;
                " v-show="!sfzup" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi">
          <div class="left" style="width: 230px; margin-bottom: 24px">
            <span v-if="danxuan != 2">*</span>法人身份证（国徽页）
          </div>
          <div class="tu1">
            <el-upload :action="$upLoad" :list-type="sfzDownImg == '' ? 'picture-card' : ''" :on-remove="sfzDownRemove"
              :on-success="sfzDownSuccess" :limit="1" ref="upload3" :on-change="uploadFile3" :auto-upload="false"
              :disabled="selectShop">
              <img class="sfz" src="../assets/sfz_z.png" v-show="sfzdow" />
              <img class="sfz" :src="sfzDownImg" style="
                  object-fit: contain;
                  cursor: pointer;
                  background-color: #fff;
                " v-show="!sfzdow" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
        <!-- 身份证 -->
        <div class="li tuLi">
          <div class="left" style="width: 230px; margin-bottom: 24px">
            <span>*</span>个人身份证（信息页）
          </div>
          <div class="tu1">
            <el-upload :action="$upLoad" :list-type="cardUpImg == '' ? 'picture-card' : ''" :on-remove="cardUpRemove"
              :on-success="cardUpSuccess" :limit="1" ref="upload4" :on-change="uploadFile4" :auto-upload="false"
              :disabled="selectShop">
              <img class="sfz" src="../assets/sfz_g.png" v-show="cardup" />
              <img class="sfz" :src="cardUpImg" style="
                  object-fit: contain;
                  cursor: pointer;
                  background-color: #fff;
                " v-show="!cardup" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi">
          <div class="left" style="width: 230px; margin-bottom: 24px">
            <span>*</span>个人身份证（国徽页）
          </div>
          <!-- :file-list="idCardDown2" -->
          <div class="tu1">
            <el-upload :action="$upLoad" :list-type="cardDownImg == '' ? 'picture-card' : ''" :on-remove="cardDownRemove"
              :on-success="cardDownSuccess" :limit="1" ref="upload5" :on-change="uploadFile5" :auto-upload="false"
              :disabled="selectShop">
              <img class="sfz" src="../assets/sfz_gs.png" v-show="carddow" />
              <img class="sfz" :src="cardDownImg" style="
                  object-fit: contain;
                  cursor: pointer;
                  background-color: #fff;
                " v-show="!carddow" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <div class="xieyi">
      <el-checkbox v-model="xieyistate"></el-checkbox>
      <p>
        发布即默认同意
        <span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(3)">《帮帮同城用户协议》</span>
        <span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(2)">《帮帮同城隐私政策》</span>
      </p>
    </div>
    <!-- <div class="queding" v-if="status != 0" @click="sbu">提交</div>
    <div class="queding" v-if="status == 0">审核中，请耐心等待</div> -->
    <template v-if="ss == 1">
      <div class="queding" v-if="status != 0" @click="sbu">修改</div>
      <div class="queding" v-if="status == 0">审核中，请耐心等待</div>
    </template>
    <template v-else>
      <div class="queding" @click="sbu" v-if="status == 2">提交审核</div>
      <div class="queding" v-if="status == 1">审核通过!</div>
      <div class="queding" v-if="status == 0">审核中，请耐心等待</div>
    </template>

    <addressmap ref="addmap" @address="onaddress"></addressmap>
    <el-dialog title="图片" :visible.sync="dialogFormVisible">
      <div style="width: 100%; height: 500px">
        <vue-cropper autoCrop :fixedBox="option.fixedBox" :fixed="option.fixed" :fixedNumber="option.fixedNumber"
          :img="showImg" ref="cropper" centerBox />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmnn">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="门店" :visible.sync="loading" width="30%">
      <div style="display: flex; margin-bottom: 20px">
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="serchtxt">
        </el-input>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 20px" @click="serch">搜索</el-button>
      </div>
      <div @click="shop(item.shopName, item.id)" style="display: flex; margin-bottom: 20px; cursor: pointer"
        v-for="(item, index) in shopList" :key="index">
        <img style="width: 150px; height: 100px; margin-right: 10px" :src="$img + item.image" />
        <div style="display: flex; flex-direction: column; justify-content: center">
          <div style="font-size: 18px; color: #000">{{ item.shopName }}</div>
          <div style="height: 20px"></div>
          <div>地址：{{ item.shopAddress }}</div>
        </div>
      </div>
      <el-pagination background layout="prev, pager, next" :total="shopTotal" :current-page="shopPage.pageNo"
        @current-change="shopchange"></el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import addressmap from "./addressMap.vue";
import axios from "axios";
export default {
  components: {
    addressmap
  },
  props: {
    amend: {
      type: Number | String,
      default: ""
    }
  },
  data() {
    return {
      xieyistate: false,
      showImg: "",
      dialogFormVisible: false,
      option: {
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式 jpeg, png, webp
        info: true, // 裁剪框的大小信息
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 345, // 默认生成截图框宽度
        autoCropHeight: 245, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1.5, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        full: true, // 是否输出原图比例的截图
        enlarge: "1", // 图片根据截图框输出比例倍数
        mode: "contain" // 图片默认渲染方式 contain , cover, 100px, 100% auto
      },
      xuan: "",
      multipleShop: "1",
      danxuan: "",
      dialogImageUrl: "",
      dialogVisible: false,
      shopIntroduce: "",
      addressList: [],
      portraitImg: "",
      yyzzImg: "",
      sfzUpImg: "",
      sfzDownImg: "",
      cardUpImg: "",
      cardDownImg: "",
      id: "",
      shopName: "",
      shopAddress: "",
      shopPhone: "",
      contacts: "",
      contactsPhone: "",
      sfzdow: true,
      sfzup: true,
      carddow: true,
      cardup: true,
      status: "2",
      idCardDown: [],
      idCardDown2: [],
      idCardUp: [],
      idCardUp2: [],
      image: [],
      businessLicense: [],
      latitude: "",
      longitude: "",

      shopPage: {
        pageNo: 1,
        pageSize: 10,
        latitude: 30.497468,
        longitude: 114.348025,
        status: "1",
        shopType: "1"
      },
      loading: false,
      shopId: "",
      storeName: "",
      shopList: [],
      shopTotal: 0,
      serchtxt: "",
      submitLoading: false,

      ss: '',

    };
  },
  mounted() {
    if (this.amend) {
      // this.modifyMerchants();

    }
  },
  created() {
    this.init();
    this.phone();
    this.ss = this.amend;

  },
  computed: {
    selectShop() {
      return this.amend == 1
    },
  },
  methods: {
    // 所属门店
    shopinfo() {
      this.loading = true;
      this.shopPage.pageNo = 1;
      this.queryStores();
    },
    //查询门店
    queryStores() {
      this.$getHttp("/mob/user/getShopInfo", this.shopPage).then(data => {
        if (data.code == 200) {
          data.page.list.forEach(e => {
            e.image = e.image.split("|")[0];
          });
          this.shopList = data.page.list;
          this.shopTotal = data.page.count;
        }
      });
    },
    shop(shopname, id) {
      this.loading = false;
      this.storeName = shopname;
      this.shopId = id;
    },
    serch() {
      const txt = this.serchtxt.trim();
      if (txt.length == 0) {
        delete this.shopPage.shopName;
      } else {
        this.shopPage.shopName = txt;
      }
      this.shopPage.pageNo = 1;
      this.queryStores();
    },
    shopchange(e) {
      this.shopPage.pageNo = e;
      this.queryStores();
    },
    modifyMerchants() {
      // this.amend=this.$route.query.amend
      this.selectShop = true;
    },
    uploadFile1(file, fileList) {
      if (file.percentage + "" == "0") {
        // this.$refs.upload1.clearFiles()
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$refs[`upload1`].clearFiles();

          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$refs[`upload1`].clearFiles();

          this.$message.error("上传图片大小不能超过2M");
          return;
        }
        this.$refs.upload1.submit();
      }
    },
    uploadFile2(file, fileList) {
      if (file.percentage + "" == "0") {
        // this.$refs.upload1.clearFiles()
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$refs[`upload2`].clearFiles();

          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$refs[`upload2`].clearFiles();

          this.$message.error("上传图片大小不能超过2M");
          return;
        }
        this.$refs.upload2.submit();
      }
    },
    uploadFile3(file, fileList) {
      if (file.percentage + "" == "0") {
        // this.$refs.upload1.clearFiles()
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$refs[`upload3`].clearFiles();

          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$refs[`upload3`].clearFiles();

          this.$message.error("上传图片大小不能超过2M");
          return;
        }
        this.$refs.upload3.submit();
      }
    },
    uploadFile4(file, fileList) {
      if (file.percentage + "" == "0") {
        // this.$refs.upload1.clearFiles()
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$refs[`upload4`].clearFiles();

          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$refs[`upload4`].clearFiles();

          this.$message.error("上传图片大小不能超过2M");
          return;
        }
        this.$refs.upload4.submit();
      }
    },
    uploadFile5(file, fileList) {
      if (file.percentage + "" == "0") {
        // this.$refs.upload1.clearFiles()
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$refs[`upload5`].clearFiles();

          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$refs[`upload5`].clearFiles();

          this.$message.error("上传图片大小不能超过2M");
          return;
        }
        this.$refs.upload5.submit();
      }
    },
    uploadImg(e) { },
    uploadFile(file, fileList) {
      console.log(file, fileList);
      this.$refs.upload6.clearFiles();
      if (file.percentage + "" == "0") {
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$refs[`upload6`].clearFiles();

          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$refs[`upload6`].clearFiles();

          this.$message.error("上传图片大小不能超过2M");
          return;
        }

        //    this.showImg =file.raw
        this.showImg = URL.createObjectURL(file.raw);
        this.dialogFormVisible = true;
      }
    },
    confirmnn() {
      this.dialogFormVisible = false;
      // this.$refs.upload.submit()

      this.getCropData();
    },
    //   裁剪圖片
    getCropData() {
      let self = this;
      this.$refs.cropper.getCropData(data => {
        console.log(data);
        let param = new FormData(); // 创建form对象
        param.append("file", this.dataURLtoBlob(data)); // 通过append向form对象添加数据

        // console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
        let config = {
          headers: {
            "Content-Type":
              "multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq"
          }
        };

        // 添加请求头
        axios.post(this.$upLoad, param, config).then(response => {
          response = response.data;

          if (response.code === 200) {
            self.portraitImg = response.data[0].url;
          }
        });
      });
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },

    //
    init() {
      this.getShopInfo();
      this.getDictionaries();
    },
    addressopen() {
      if (!this.selectShop) {
        if (this.shopAddress && this.longitude) {
          this.$refs.addmap.address = this.shopAddress;
          this.$refs.addmap.open(true,{latitude: this.longitude,longitude: this.latitude});
        }
        this.$refs.addmap.open();
      }
    },
    onaddress(item) {
      this.latitude = item.location.lat;
      this.longitude = item.location.lng;
      this.shopAddress = item.address;
    },
    //查询改用户是否已经认证了商家
    // getShopInfoDetailByCopy
    getShopInfo() {
      let that = this;
      this.$getHttp("/api/mobile/vehicleOwner/getPersonalDistributorById", {
        userId: JSON.parse(localStorage.getItem("userInfo")).id
      }).then(res => {
        if (!res.distributorList) return;
        // this.selectShop=true

        this.id = res.distributorList.originalId
          ? res.distributorList.originalId
          : res.distributorList.id;
        this.status = res.distributorList.auditStatus;

        // if (this.status == 1 && this.selectShop) {
        //   console.log(this.selectShop, this.status);
        //   this.status = 2;
        // }

        this.shopName = res.distributorList.storeName;
        this.shopAddress = res.distributorList.officeAddress;
        that.longitude = res.distributorList.longitude;
        that.latitude = res.distributorList.latitude;

        this.storeType = res.distributorList.storeType; //发布车类型
        this.multipleShop = this.storeType;

        this.xuan = res.distributorList.officeArea; //区域

        this.shopPhone = res.distributorList.storeContactNumber;
        this.contacts = res.distributorList.legalName;
        this.contactsPhone = res.distributorList.contactPhoneNumber;
        that.shopIntroduce = res.distributorList.storeIntroduction;

        that.idCardDown.push({
          name: "img",
          url: res.distributorList.legalIdcardBack
        });
        that.idCardDown2.push({
          name: "img",
          url: res.distributorList.personalIdcardBack
        });
        that.idCardUp.push({
          name: "img",
          url: res.distributorList.legalIdcardJust
        });
        that.idCardUp2.push({
          name: "img",
          url: res.distributorList.personalIdcardJust
        });

        that.image.push({
          name: "img",
          url: res.distributorList.storeCoverImage
        });
        that.businessLicense.push({
          name: "img",
          url: res.distributorList.businessLicense
        });

        this.portraitImg = res.distributorList.storeCoverImage;
        this.yyzzImg = res.distributorList.businessLicense;
        this.sfzUpImg = res.distributorList.legalIdcardJust;
        this.sfzDownImg = res.distributorList.legalIdcardBack;
        this.cardUpImg = res.distributorList.personalIdcardJust;
        this.cardDownImg = res.distributorList.personalIdcardBack;

        that.sfzup = false;
        that.sfzdow = false;
        that.carddow = false;
        that.cardup = false;

        return;
        if (data.shopInfo) {
          that.id = data.shopInfo.id;
          that.status = data.shopInfo.status;
          that.shopAddress = data.shopInfo.shopAddress;
          that.shopName = data.shopInfo.shopName;
          that.longitude = data.shopInfo.longitude;
          that.latitude = data.shopInfo.latitude;
          that.shopPhone = data.shopInfo.shopPhone;
          that.contacts = data.shopInfo.contacts;
          that.contactsPhone = data.shopInfo.contactsPhone;
          that.xuan = data.shopInfo.shopArea;
          that.danxuan = String(data.shopInfo.shopType);
          that.shopIntroduce = data.shopInfo.shopIntroduce;
          if (
            data.shopInfo.mainStore &&
            data.shopInfo.mainStore != "" &&
            data.shopInfo.mainStore != 0
          ) {
            this.multipleShop = "1";
            this.shopId = data.shopInfo.mainStore;
            this.storeName = data.shopInfo.mainStoreShopName;
          }
          that.idCardDown.push({
            name: "img",
            url: that.$img + data.shopInfo.idCardDown
          });
          that.idCardDown2.push({
            name: "img",
            url: that.$img + data.shopInfo.cardDown
          });
          that.idCardUp.push({
            name: "img",
            url: that.$img + data.shopInfo.idCardUp
          });
          that.idCardUp2.push({
            name: "img",
            url: that.$img + data.shopInfo.cardUp
          });

          that.image.push({
            name: "img",
            url: that.$img + data.shopInfo.image
          });
          that.businessLicense.push({
            name: "img",
            url: that.$img + data.shopInfo.businessLicense
          });
          this.portraitImg = data.shopInfo.image;
          this.yyzzImg = data.shopInfo.businessLicense;
          this.sfzUpImg = data.shopInfo.idCardUp;
          this.sfzDownImg = data.shopInfo.idCardDown;
          this.cardUpImg = data.shopInfo.cardUp;
          this.cardDownImg = data.shopInfo.cardDown;

          that.sfzup = false;
          that.sfzdow = false;
          that.carddow = false;
          that.cardup = false;
        }
      });
    },
    //查询字典
    getDictionaries() {
      this.$getHttp("/mob/home/getDictionaries", { type: "7" }).then(data => {
        if (data.code == 200) {
          data.list.forEach(e => {
            this.addressList.push(e.valueName);
          });
        }
      });
    },
    async sbu() {
      // if(!await this.authUser('汽车店铺')) return
      // 增加 cardUpImg  cardDownImg
      // if (this.multipleShop=='1') {
      //     if (this.shopId=='') {
      //         this.$message({
      //           message: "请选择连锁店",
      //           type: "error",
      //           offset: 120,
      //           duration: 2000,
      //         });
      //         return
      //     }
      // }
      if (!this.xieyistate) {
        this.$message({
          message: "请勾选协议政策",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return;
      }
      console.log({
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
        id: this.id,
        shopType: this.danxuan,
        storeName: this.shopName,
        storeType: this.multipleShop,
        officeArea: this.xuan,
        officeAddress: this.shopAddress,
        longitude: this.longitude,
        latitude: this.latitude,
        storeContactNumber: this.shopPhone,
        legalName: this.contacts,
        contactPhoneNumber: this.contactsPhone,
        storeCoverImage: this.portraitImg,
        businessLicense: this.yyzzImg,
        legalIdcardJust: this.sfzUpImg,
        legalIdcardBack: this.sfzDownImg,
        personalIdcardJust: this.cardUpImg,
        personalIdcardBack: this.cardDownImg,
        status: this.status == 2 ? '0' : this.status,
        // mainStore:this.multipleShop=='1'?this.shopId:'0'
      });
      if (false) {
        console.log("this.danxuan");
        // 不传法人身份证sfzUpImg、sfzDownImg
        if (
          this.shopName != "" &&
          this.xuan != "" &&
          this.shopAddress != "" &&
          this.shopPhone != "" &&
          this.contacts != "" &&
          this.contactsPhone != "" &&
          this.danxuan != "" &&
          this.shopIntroduce != "" &&
          this.portraitImg != "" &&
          this.yyzzImg != "" &&
          this.cardUpImg != "" &&
          this.cardDownImg != ""
        ) {
          return;
          this.$postHttp(
            "/api/mobile/vehicleOwner/authenticationOrModifyDistributor",
            {
              userId: JSON.parse(localStorage.getItem("userInfo")).id,
              id: this.id,
              shopType: this.danxuan,
              storeName: this.shopName,
              storeType: this.multipleShop,
              officeArea: this.xuan,
              officeAddress: this.shopAddress,
              longitude: this.longitude,
              latitude: this.latitude,
              storeContactNumber: this.shopPhone,
              legalName: this.contacts,
              contactPhoneNumber: this.contactsPhone,
              storeCoverImage: this.portraitImg,
              businessLicense: this.yyzzImg,
              legalIdcardJust: this.sfzUpImg,
              legalIdcardBack: this.sfzDownImg,
              personalIdcardJust: this.cardUpImg,
              personalIdcardBack: this.cardDownImg
              // status:this.status==2?'0':this.status,
              // mainStore:this.multipleShop=='1'?this.shopId:'0'
            }
          ).then(data => {
            if (data.code == 200) {
              if (data.success) {
                this.$message({
                  message: "提交成功，请等待审核！",
                  type: "success",
                  offset: 120,
                  duration: 2000
                });
              } else {
                this.$message({
                  message: data.msg,
                  type: "success",
                  offset: 120,
                  duration: 2000
                });
              }
              setTimeout(() => {
                this.$router.push({
                  path: "/my/personal"
                });
              }, 1000);
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                offset: 120,
                duration: 2000
              });
            }
          });
        } else {
          this.$message({
            message: "必填项不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
        }
      } else {
        console.log("danxuan.this");

        // 传法人身份证sfzUpImg、sfzDownImg
        if (
          this.shopName != "" &&
          this.xuan != "" &&
          this.shopAddress != "" &&
          this.shopPhone != "" &&
          this.contacts != "" &&
          this.contactsPhone != "" &&
          this.multipleShop != "" &&
          this.shopIntroduce != "" &&
          this.portraitImg != "" &&
          this.yyzzImg != "" &&
          this.sfzUpImg != "" &&
          this.sfzDownImg != "" &&
          this.cardUpImg != "" &&
          this.cardDownImg != ""
        ) {
          if (this.submitLoading) {
            return;
          }
          this.submitLoading = true;
          this.$postHttp(
            "api/mobile/vehicleOwner/authenticationOrModifyDistributor",
            {
              userId: JSON.parse(localStorage.getItem("userInfo")).id,
              id: this.id,
              // shopType: this.danxuan,
              storeName: this.shopName,
              storeType: this.multipleShop,
              officeArea: this.xuan,
              officeAddress: this.shopAddress,
              longitude: this.longitude,
              latitude: this.latitude,
              storeContactNumber: this.shopPhone,
              legalName: this.contacts,
              contactPhoneNumber: this.contactsPhone,
              storeIntroduction: this.shopIntroduce,
              storeCoverImage: this.portraitImg,
              businessLicense: this.yyzzImg,
              legalIdcardJust: this.sfzUpImg,
              legalIdcardBack: this.sfzDownImg,
              personalIdcardJust: this.cardUpImg,
              personalIdcardBack: this.cardDownImg
              // status:this.status==2?'0':this.status,
              // mainStore:this.multipleShop=='1'?this.shopId:'0'
            }
          ).then(data => {
            if (data.code == 200) {
              if (data.success) {
                this.$message({
                  message: "提交成功，请等待审核！",
                  type: "success",
                  offset: 120,
                  duration: 2000
                });
                this.init();
              } else {
                this.$message({
                  message: data.msg,
                  type: "success",
                  offset: 120,
                  duration: 2000
                });
                this.submitLoading = false;
              }
              // setTimeout(() => {
              //   this.$router.push({
              //     path: "/my/personal",
              //   });
              // }, 1000);
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                offset: 120,
                duration: 2000
              });
            }
          });
        } else {
          this.$message({
            message: "必填项不能为空！",
            type: "error",
            offset: 120,
            duration: 2000
          });
        }
      }
    },
    portraitRemove(file, fileList) {
      this.portraitImg = "";
    },
    yyzzRemove(file, fileList) {
      this.yyzzImg = "";
    },
    sfzUpRemove(file, fileList) {
      this.sfzUpImg = "";
      this.sfzup = true;
    },
    sfzDownRemove(file, fileList) {
      this.sfzDownImg = "";
      this.sfzdow = true;
    },
    cardUpRemove(response, file, fileList) {
      this.cardUpImg = "";
      this.cardup = true;
    },
    cardDownRemove(response, file, fileList) {
      this.cardDownImg = "";
      this.carddow = true;
    },
    portraitSuccess(response, file, fileList) {
      this.portraitImg = response.data[0].url;
    },
    yyzzSuccess(response, file, fileList) {
      this.yyzzImg = response.data[0].url;
      this.$refs.upload1.clearFiles();
    },
    sfzUpSuccess(response, file, fileList) {
      this.sfzUpImg = response.data[0].url;
      this.sfzup = false;
      this.$refs.upload2.clearFiles();
    },
    sfzDownSuccess(response, file, fileList) {
      this.sfzdow = false;
      this.sfzDownImg = response.data[0].url;
      this.$refs.upload3.clearFiles();
    },
    cardUpSuccess(response, file, fileList) {
      this.cardup = false;
      this.cardUpImg = response.data[0].url;
      this.$refs.upload4.clearFiles();
    },

    cardDownSuccess(response, file, fileList) {
      this.carddow = false;
      this.cardDownImg = response.data[0].url;
      this.$refs.upload5.clearFiles();
    },
    // 取用户手机号
    phone() {
      this.contactsPhone = JSON.parse(localStorage.getItem("userInfo")).phone;
    }
  }
};
</script>
<style lang="less" scoped>
.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
    }

    .rig {
      // position: absolute;
      // right: 0;
      margin-left: auto;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {}

      span {
        vertical-align: middle;
      }
    }

    .but {
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.form {
  width: 700px;
  color: #333;

  .name {
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 35px;
  }

  .list {
    .li {
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 16px;
      margin-top: 20px;

      .left {
        display: inline-block;
        width: 140px;
        font-size: 20px;
        font-weight: 600;
        margin-right: 5px;

        span {
          color: red;
        }
      }

      .right {
        display: inline-block;
        width: 550px;

        input {
          width: 99%;
          font-size: 20px;
          background-color: #fff;
          cursor: pointer;
        }

        .el-select {
          width: 99%;

          /deep/.el-input__inner {
            border: 0;
            padding: 0;
            font-size: 20px;
          }
        }

        /deep/.el-radio__label {
          font-size: 18px;
        }

        /deep/.el-radio__inner {
          width: 28px;
          height: 28px;
        }

        /deep/.el-radio__input.is-checked .el-radio__inner {
          background-color: #64b6a8;
          border-color: #64b6a8;
        }

        /deep/.el-radio__inner::after {
          box-sizing: content-box;
          content: "";
          border: 2px solid #fff;
          position: absolute;
          transform: rotate(45deg) scaleY(1);
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
          border-radius: 0;
          background-color: rgba(0, 0, 0, 0);
          width: 6px;
          height: 13px;
          left: 9px;
          top: 4px;
          border-left: 0;
          border-top: 0;
        }

        /deep/.el-radio__input.is-checked+.el-radio__label {
          color: #333;
        }
      }

      .tu {
        position: relative;
        margin-top: 24px;
        width: 100%;
        font-size: 18px;

        .el-textarea {
          font-size: 18px;
        }

        .textarea {
          /deep/.el-textarea__inner {
            width: 698px;
            min-height: 80px !important;
            line-height: 25px;
            outline: none;
            padding: 10px 13px 30px 13px;
            overflow-y: visible;
          }
        }

        .zi {
          position: absolute;
          font-size: 14px;
          z-index: 99;
          right: 10px;
          bottom: 10px;
          color: #999999;
        }

        .shuoming {
          position: absolute;
          top: 0px;
          left: 180px;
          width: 308px;
          font-size: 18px;
          color: #999999;
          display: inline-block;
        }
      }

      .tu1 {
        position: relative;

        .sfz {
          width: 683px;
          height: 242px;
          top: 0px;
          left: 0px;
        }

        /deep/.el-upload--picture-card {
          width: 683px;
          height: 242px;
          overflow: hidden;
        }
      }
    }

    .tuLi {
      border: 0;
    }
  }
}

.xieyi {
  width: 550px;
  color: #333;
  margin: 0 auto;
  margin-top: 70px;
  margin-bottom: 25px;

  /deep/.el-checkbox__inner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }

  /deep/.el-checkbox__inner::after {
    border: 2px solid #fff;
    width: 6px;
    height: 13px;
    left: 9px;
    top: 4px;
    border-left: 0;
    border-top: 0;
  }

  /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
  /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #64b6a8;
    border-color: #64b6a8;
  }

  p {
    width: 450px;
    display: inline-block;
  }
}

.queding {
  width: 300px;
  height: 60px;
  background: #64b6a8;
  border-radius: 6px;
  text-align: center;
  line-height: 60px;
  margin: 0 auto;
  font-size: 24px;
  margin-bottom: 50px;
  cursor: pointer;
  color: #fff;
}

/deep/#input__inner {
  border: 1px #ffffff solid;
  font-size: 20px;
  height: 23px;
  cursor: pointer;
  padding: 0;
  background-color: #ffffff;
}

/deep/.el-input-group__append {
  border: 0;
  background-color: #ffffff;
}

/deep/.el-input__suffix {
  right: -40px;
}

/deep/#el-select {
  max-width: 300px;
}
</style>
